<template>
    <div>
      <span>{{value}}</span>&nbsp; <i @click.stop="edit" style="color: #000;" class="el-icon-edit"></i>
    </div>
</template>

<script>
    export default {
      name: 'FiledEdit',
      props: ['id', 'name', 'value', 'callback', 'title', 'url'],
      methods: {
        edit () {
          this.$prompt('', this.title || '修改', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue: this.value
          }).then(({ value }) => {
            console.log('value', value)
            // this.value = this.value
            this.update(value)
          }).catch(() => {
          })
        },
        update (value) {
          // var self = this
          var form = {}
          console.log('form', form)
          form[this.name] = value
          form.id = this.id
          console.log('form', form)
          this.$http({
            url: this.$http.adornUrl(this.url),
            method: 'post',
            data: this.$http.adornData(form)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.value = value
              // this.callback(data)
              this.$message({
                message: '已更新',
                type: 'success',
                duration: 1000,
                onClose: () => {
                }
              })
            } else {
              this.$message.error(data.msg)
              this.callback()
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
